<template>
  <div class="office-demand">
    <VptRankBar
      :width="width"
      :height="height"
      :chartData="rankData"
      autoRander
      v-bind="chartProps"
      :iconWidth="iconWidth"
      :iconHeight="iconHeight"
      :labelFontSize="labelFontSize"
      :valueFontSize="valueFontSize"
      :barWidth="barWidth"
      :labelPadding="labelPadding"
      :labelNamePadding="labelNamePadding"
      :valuePadding="valuePadding"
      :labelHeight="labelHeight"
    ></VptRankBar>
  </div>
</template>

<script setup>
import VptRankBar from "@/components/echarts/vpt-rankBar/index.vue";
import { fontSize } from "@/utils/rem/rem.js";

const props = defineProps({
  // 图表数据
  iconWidth: { type: Number, default: 24 },
  iconHeight: { type: Number, default: 12 },
  labelFontSize: { type: Number, default: 12 },
  valueFontSize: { type: Number, default: 12 },
  barWidth: { type: Number, default: 12 },
  // label高度
  labelHeight:{ type: Number, default: 24 },
  rankData: { type: Array, default: () => [] },
  width: {
    type: String,
    default: "5.4rem",
  },
  height: {
    type: String,
    default: "1.9rem",
  },
  endValue: {
    type: Number,
    default: 3,
  },
});

const labelPadding = [0, 0, fontSize(8), 10];
const labelNamePadding = [0, 0, 0, fontSize(10)];
const valuePadding = [0, 10, fontSize(8), 0];

const chartProps = {
  titleProps: {
    text: "",
  },
  grid: {
    left: fontSize(16),
    top: fontSize(20),
    right: fontSize(16),
    bottom: fontSize(16),
    containLabel: false,
  },
  dataZoom: {
    show: false,
    endValue: props.endValue,
  },
};
</script>

<style lang="less" scoped>
.office-demand {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>